<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<p>selected: {{selected}}</p>
<p>removed: {{removed}}</p>
<hr>

<jigsaw-combo-select placeholder="请输入姓名~"
                     [(value)]="selectedCity"
                     (valueChange)="valueChange($event)"
                     (select)="select($event)"
                     (remove)="remove($event)"
                     maxWidth="500"
                     [clearable]="true">
    <ng-template>
        <jigsaw-tile [(selectedItems)]="selectedCity"
                     trackItemBy="label"
                     width="400px">
            <jigsaw-tile-option *ngFor="let city of cities" [value]="city" width="22.8%">
                {{city.label}}
            </jigsaw-tile-option>
        </jigsaw-tile>
    </ng-template>
</jigsaw-combo-select>


